<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "景点活动",
    },
}
</route>

<template>
    <view class="m-base-box m-dynamic">
        <wd-search v-model="title" hide-cancel @search="getList" custom-class="u-search" placeholder="请输入关键字" />
        <!-- 内容区域 -->
        <view class="mt-2" v-for="(item, index) in list" :key="index" @click="goToDetail(item?.id)">
            <wd-card>
                <wd-img width="100%" :height="230" :src="item?.image?.url">
                    <template #error>
                        <view class="flex justify-center items-center w-[100%] h-[100%]">加载失败</view>
                    </template>
                    <template #loading>
                        <view class="flex justify-center items-center w-[100%] h-[100%]">
                            <wd-loading />
                        </view>
                    </template>
                </wd-img>
                <template #footer>
                    <view class="flex flex-col items-start gap-1 pt-2 w-[100%]">
                        <wd-text :text="item?.title" bold size="18px" color="#000"></wd-text>
                        <view class="flex justify-between items-center mt-2 w-[100%]">
                            <view>
                                <wd-text :text="item?.viewCount" size="12px" color="#949090" prefix="浏览量："></wd-text
                            ></view>
                            <view>
                                <wd-text
                                    :text="item?.createTime"
                                    size="12px"
                                    color="#949090"
                                    prefix="发布时间："
                                ></wd-text
                            ></view>
                        </view>
                    </view>
                </template>
            </wd-card>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getSpotActiviteUsingGet } from "@/service/app";
const title = ref("");
const list = ref([]);

function getList() {
    getSpotActiviteUsingGet({ params: { title: title.value } }).then((res) => {
        console.log("getSpotActiviteUsingGet", res);
        list.value = res?.data || [];
    });
}
function goToDetail(id: string) {
    uni.navigateTo({
        url: `/pages/scenicSpot/dynamicDetail?id=${id}`,
    });
}
onLoad(() => {
    getList();
});
</script>

<style lang="scss" scoped>
.m-dynamic {
    :deep(.u-search) {
        background: rgba(255, 255, 255, 0);
    }
}
</style>
